/*
 * Description: 测试axios取消请求
 * Author: wangyifei
 * DateCreated: 2024-01-09 10:50
 */

import { useState } from 'react';
import { Alert, Button, Divider, Space } from 'antd';
import { testHttp } from '@/utils/request';
import Cancel from './Cancel';

function fetchTestPost() {
	return testHttp.post({
		url: '/test/fetch-post',
		data: { name: 'frank' }
	});
}
function fetchTestGet() {
	return testHttp.get({
		url: '/test/fetch-get?title=测试&num=999',
		params: { age: 18 }
	});
}

const msg = '测试axios取消请求';

const mapList = new Map<string, { status: 'pending' | 'fulfilled' | 'rejected' }>();

const AxiosTest = () => {
	return (
		<>
			<Alert type="info" message={msg} />
			<Divider />
			<Cancel />
			<Divider />
			<Space>
				<Button
					type="primary"
					ghost
					onClick={async () => {
						const res = await fetchTestPost();
						console.log('post result:', res);
					}}
				>
					测试相同接口 post
				</Button>
				<Button
					type="primary"
					ghost
					onClick={async () => {
						const res = await fetchTestGet();
						console.log('get result:', res);
					}}
				>
					测试相同接口 get
				</Button>
				<Button onClick={() => mapList.set('abc', { status: 'pending' })}>设置map对象</Button>
				<Button
					onClick={() => {
						const obj = mapList.get('abc');
						console.log(obj);
					}}
				>
					获取
				</Button>
			</Space>
		</>
	);
};

export default AxiosTest;
